<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>选项卡</title>
    <!--
    1. 实现静态效果制作

        正常情况，给框设置边框线和内边距，在内容区域之外添加的，实际看到的div框大小：实际宽度 = width + 左右内边距 + 左右边框线

        给这个框设置属性： box-sizing:border-border; 现在给这个框设置边框线和内边距都是在内容区域内设置的
    2. 实现交互效果

-->
    <script src="js/tab.js" type="text/javascript"></script>
    <style>
        *{margin: 0px;padding: 0px}
        /*box-sizing: border-box:表示边框也算在宽度和高度里面了*/
        .cont{
            width: 400px;height: 300px;
            margin: 50px;border: 1px solid red;
        }
        .nav{
            height: 40px;background: #1ba9ee;
            /*这个是用来清楚浮动的，为了下面内容区域的起始位置*/
            overflow: hidden;
        }
        .nav li{
            /*这里由于有了边框，所以第四个的会掉落到第二行，要么重新设置宽度为408要么这样做*/
             box-sizing: border-box;cursor: pointer;
            float: left;width: 100px;text-align: center;height: 40px;
            display: inline-block;border: 1px solid #55a532;line-height: 40px;
        }
        /*activate表示默认的激活状态*/
        .nav li.active{
            background: blueviolet;color: white;
        }
        p{
            height: 260px;background: #999999;line-height: 260px;
            font-size: 50px;color: white;text-align: center;display: none;
        }
        p.active{
            display: block;
        }
    </style>
</head>
<body>
    <div class="cont">
        <div class="nav" id="nav" >
            <ul>
                <li class="active">1</li>
                <li>2</li>
                <li>3</li>
                <li>4</li>
            </ul>
        </div>
        <div class="text" id="text">
            <p class="active">1</p>
            <p>2</p>
            <p>3</p>
            <p>4</p>
        </div>

    </div>

</body>
</html>